<template>
	<div class="flow-manage">
		<div class="title">
			<span></span>
			流程管理
		</div>
		<div class="search-box">
			<el-form :model="formData" label-width="60px" :inline="true">
				<el-form-item :prop="formData.FlowName" label="流程名">
					<el-input v-model="formData.FlowName" style="width: 300px" placeholder="请输入流程名" clearable />
				</el-form-item>
				<el-form-item :prop="formData.Descption" label="说明">
					<el-input v-model="formData.Descption" style="width: 300px" placeholder="请输入说明" clearable />
				</el-form-item>
				<el-form-item class="btns">
					<el-button type="primary" :icon="Search" @click="handleSearch()">搜索</el-button>
					<el-button type="success" :icon="Plus" @click="handleShowAddDialog">添加</el-button>
				</el-form-item>
			</el-form>
		</div>

		<el-table :data="tableData" border style="width: calc(100% - 40px); margin: 20px 20px 0 20px">
			<el-table-column label="ID" width="90" prop="FlowID" />
			<el-table-column label="流程名" width="300" prop="FlowName" />
			<el-table-column label="说明" prop="Descption" />
			<el-table-column label="备注" prop="Remarks" />
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="text" @click="handleShowUpdateDialog(scope.row)">修改</el-button>
					<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination
				background
				:layout="pageConfig.layout"
				:total="pageConfig.total"
				v-model:current-page="pageConfig.currentPage"
				:page-sizes="pageConfig.sizes"
				:page-size="pageConfig.pagesize"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		<el-dialog :title="isAdd ? '添加流程' : '修改流程'" v-model="showDialog" width="30%">
			<el-form ref="addOrUpdateFormRef" :model="addOrUpdateData" :rules="addOrUpdateRules" label-width="80px">
				<el-form-item label="流程名称" prop="FlowName"><el-input v-model="addOrUpdateData.FlowName" /> </el-form-item>
				<el-form-item label="流程说明" prop="Desc"><el-input v-model="addOrUpdateData.Descption" /> </el-form-item>
				<el-form-item label="备注" prop="Remarks"><el-input v-model="addOrUpdateData.Remarks" /> </el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">取 消</el-button>
					<el-button type="primary" @click="handleAddOrUpdateApi">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, FormRules, FormInstance } from 'element-plus';
import { Search, Plus } from '@element-plus/icons-vue';

import { httpReqeustApi } from '/@/api/linxyun/base/index';

interface IState {
	tableData: never[];
	showDialog: boolean;
	isAdd: boolean;
	addOrUpdateData: Record<string, any>;
	addOrUpdateRules: FormRules;
	pageConfig: IPageConfig;
}
interface IPageConfig {
	sizes: number[];
	layout: string;
	total: number;
	pagesize: number;
	currentPage: number;
}
const router = useRouter();
const httpRequest = httpReqeustApi();

const formData = reactive<Record<string, any>>({ FlowName: '', Descption: '', current: 1, limit: 10 });

const state = reactive<IState>({
	tableData: [],
	showDialog: false,
	isAdd: false,
	addOrUpdateData: {
		FlowName: '',
		Descption: '',
		Remarks: '',
	},
	addOrUpdateRules: {
		FlowName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
	},
	pageConfig: { sizes: [5, 10, 20, 30], layout: 'total, sizes, prev, pager, next, jumper', total: 0, pagesize: 10, currentPage: 1 },
});

const { tableData, isAdd, showDialog, addOrUpdateData, addOrUpdateRules, pageConfig } = toRefs(state);
const handleSearch = () => {
	console.log('搜索');
	httpRequest.Post('/crm/query_flows.action', {}, formData).then((res) => {
		console.log('res:', res);
		if (!(res.code === '0000') && !res.success) {
			ElMessage({
				type: 'error',
				message: '查询流程失败',
				duration: BASE_API.MSG_SHOW_TIME,
			});
		}
		state.tableData = res.Records || [];
		state.pageConfig.total = parseInt(res.TotalSize!);
		console.log('tableData', state.tableData);
	});
};
handleSearch();
const handleShowAddDialog = () => {
	state.showDialog = true;
	state.isAdd = true;
};
const handleShowUpdateDialog = (row: Record<string, any>) => {
	state.showDialog = true;
	state.isAdd = false;
	state.addOrUpdateData = row;
};

const handleEdit = (row: Record<string, any>) => {
	router.push({
		path: '/flowManage/flowDesign',
		query: { ...row },
	});
	console.log('编辑');
};
const handleDelete = (row: Record<string, any>) => {
	httpRequest.Post('/crm/delete_dev_flows.action', {}, { FlowID: row.FlowID }).then((res) => {
		console.log(res);
		if (res.code === '0000' && res.success) {
			ElMessage({
				type: 'success',
				message: '删除流程成功',
				duration: BASE_API.MSG_SHOW_TIME,
			});
			handleSearch();
		} else {
			ElMessage({
				type: 'error',
				message: '删除流程失败',
				duration: BASE_API.MSG_SHOW_TIME,
			});
		}
	});
	console.log('删除');
};
const addOrUpdateFormRef = ref<FormInstance>();
const handleAddOrUpdateApi = () => {
	addOrUpdateFormRef.value!.validate((valid) => {
		if (!valid) {
			ElMessage({
				type: 'warning',
				message: '请填写必填字段',
				duration: BASE_API.MSG_SHOW_TIME,
			});
			return;
		}
		if (state.isAdd) {
			httpRequest.Post('/crm/add_dev_flows.action', {}, state.addOrUpdateData).then((res) => {
				if (res.code === '0000' && res.success) {
					ElMessage({
						type: 'success',
						message: '添加流程成功',
						duration: BASE_API.MSG_SHOW_TIME,
					});
					handleSearch();
				} else {
					ElMessage({
						type: 'error',
						message: '添加流程失败',
						duration: BASE_API.MSG_SHOW_TIME,
					});
				}
			});
		} else {
			httpRequest.Post('/crm/update_dev_flows.action', {}, state.addOrUpdateData).then((res) => {
				console.log(res);
				if (res.code === '0000' && res.success) {
					ElMessage({
						type: 'success',
						message: '修改流程成功',
						duration: BASE_API.MSG_SHOW_TIME,
					});

					handleSearch();
				} else {
					ElMessage({
						type: 'error',
						message: '修改流程失败',
						duration: BASE_API.MSG_SHOW_TIME,
					});
				}
			});
		}
		state.showDialog = false;
		state.addOrUpdateData = {};
	});
};
const handleSizeChange = (size: number) => {
	formData.limit = size;
	state.pageConfig.pagesize = size;
	handleSearch();
};
const handleCurrentChange = (currentPage: number) => {
	formData.current = currentPage;
	state.pageConfig.currentPage = currentPage;
	handleSearch();
};
</script>
<style lang="scss" scoped>
.flow-manage {
	background-color: #fff;
	min-height: calc(100vh - 130px);
	.search-box {
		margin-left: 15px;
	}
}
.title {
	padding: 20px 0;
	margin-left: 15px;
	padding-left: 10px;

	font-size: 18px;
	span {
		border-left: 6px solid #409eff;
		margin-right: 5px;
	}
}
.pagination {
	margin-top: 20px;
	margin-left: 15px;
}
</style>
